<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>知乎</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <!-- 外部css文件 -->

    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="../../static/js/header.js" th:src="@{/js/header.js}"></script>
    <!--script写在fragment内否则不被引用-->
</head>


<div th:fragment="articleList"
    style="padding:20px 10px 20px 20px;border-bottom:solid;border-width: 1px;border-color: #f0f2f7">
    <link rel="stylesheet" type="text/css" href="style.css" th:href="@{/css/style.css}">


    <style>
        .contentImg {
            word-wrap: break-word;
            float: right;
            width: 474px;
            padding-left: 2px;
            padding-top: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }

        .contentNoImg {
            word-wrap: break-word;
            float: right;
            width: 474px;
            padding-left: 2px;
            padding-top: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .right{
            color: #8590a6;
        }
    </style>

    <div th:id="${articleList.id}" class="articleList">
        <div class="article">
            <a  th:href="@{'http://localhost:8080/articleDetails?articleid='+${articleList.id}}" style="font-weight:bold;font-size: 20px;color: black"
                th:text="${articleList.articlename}">请问厦门理工学院怎么样？</a>
        </div>
        <div class="RichContent">
            <div class="FullContent" style="display: inline-block;">
                <!--图片显示-->
                <div style="float: left;margin-top: 5px;border-radius:10px;background-color: red;"
                    th:if="${not #strings.isEmpty(articleList.articlepicture)}">
                    <img th:src="@{${articleList.articlepicture}}" style="height: 105px;width:190px;">
                </div>

                <div class="contentImg" th:if="${not #strings.isEmpty(articleList.articlepicture)}">
                    <span th:text="${articleList.username}"></span>:
                    <a href="#" style="color: black" th:utext="${articleList.articletext}">有图片显示四行</a>
                </div>

                <div class="contentNoImg" th:unless="${not #strings.isEmpty(articleList.articlepicture)}">
                    <span th:text="${articleList.username}"></span>:
                    <a href="#" style="color: black" >
                        <div th:utext="${articleList.articletext}">无图片显示两行</div>
                    </a>
                </div>
            </div>


            <div class="ContentItem-time" th:text="${articleList.createtime}"
                style="color: #8590a6;margin-bottom:5px;">发布于2019.07.07</div>


        </div>
    </div>


    <script>
        function agree(articleId) {
            var content = $("#" + articleId + " .agree").text();
            console.log("content"+content)
            console.log("articleId"+articleId)
            if (content == "赞同"){
                $.ajax({
                    type:"post",
                    data:{"kind":'1',"answerid":articleId},
                    url:"http://localhost:8080/addAproveArticle",
                    success:function (result) {
                        $("#" + articleId + " .agree").html("已赞同")
                    },
                    error:function (result) {
                        alert("未知错误")
                    }
                })

            }
            else{
                $.ajax({
                    type:"post",
                    data:{"kind":'0',"articleid":articleId},
                    url:"http://localhost:8080/addAproveArticle",
                    success:function (result) {
                        $("#" + articleId + " .agree").html("赞同")
                    },
                    error:function (result) {
                        alert("未知错误")
                    }
                })
            }
        }

        /**
         * 1.展示评论内容
         * 2.显示回复内容
         * */
        // function show(answerId) {
        //     alert(answerId)
        //     $.ajax({
        //        type:"post",
        //        data:{"answerid":answerId},
        //        dataType : "json",
        //        url:"http://localhost:8080/getComments",
        //         success:function (result) {
        //             $("#" + answerId + " .commentDetails").toggle();
        //             function getReplies(bearticleid) {
        //                 alert("获取回复内容");
        //                 $.ajax({
        //                    type:"post",
        //                     data:{"bearticleid":bearticleid},
        //                     url:"http://localhost:8080/getReplies",
        //                     success:function (result) {
        //                         alert("获取成功")
        //                     },
        //                     error:function (result) {
        //                         alert("获取失败")
        //                     }
        //                 });
        //             }
        //         }
        //     });
        //
        // }



        function getCookie(name) {
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

            if (arr = document.cookie.match(reg))

                return unescape(arr[2]);
            else
                return null;
        }
    </script>

</div>

</html>